<template>
  <q-page class="flex flex-column">
    <q-header class="bg-black-2">
      <q-tabs v-model="tab" align="center" class="text-white">
        <q-tab name="project" label="项目管理" />
        <q-tab name="profile" label="个人中心" />
      </q-tabs>
    </q-header>

    <q-page>
      <component style="width: 100vw;" :is="tabComponent" />
    </q-page>
  </q-page>
</template>

<script setup>
import { ref, defineOptions, computed, defineAsyncComponent } from "vue";

defineOptions({
  name: "IndexPage",
});

// 动态导入组件
const ProjectManagementComponent = defineAsyncComponent(() =>
  import("src/components/Project.vue")
);
const UserProfileComponent = defineAsyncComponent(() =>
  import("src/components/UserInfo.vue")
);
const DrawComponent = defineAsyncComponent(() =>
  import("src/components/Draw.vue")
);
const ResultComponent = defineAsyncComponent(() =>
  import("src/components/Result.vue")
);

const tab = ref("profile");

const tabComponent = computed(() => {
  switch (tab.value) {
    case "project":
      return ProjectManagementComponent;
    case "profile":
      return UserProfileComponent;
    case "result":
      return ResultComponent;
    case "drawing":
      return DrawComponent;
    default:
      return ResultComponent;
  }
});
</script>
